<template>
  <up-modal
    :show="show"
    @confirm="submit"
    confirmColor="#d54448"
  >
    <template #default>
      <up-form :model="deviceForm" ref="uFormRef" :rules="rules">
        <up-form-item label="设备名称" prop="name">
          <up-input v-model="deviceForm.name" />
        </up-form-item>
        <up-form-item label="设备编码" prop="name">
          <up-input v-model="deviceForm.code" />
        </up-form-item>
        <up-form-item label="设备类型" prop="name">
          <up-input v-model="deviceForm.type" />
        </up-form-item>
        <up-form-item label="设备位置" prop="name">
          <up-input v-model="deviceForm.local" />
        </up-form-item>
      </up-form>
    </template>
  </up-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  }
})
const emit = defineEmits(['confirm', 'setShow'])

// 响应式表单数据  
const deviceForm = ref({  
  name: '',
  code: '',
  type: '',
  local: '',
}); 
// 校验规则  
const rules = {  
  name: [  
    {  
      required: true,  
      message: '请输入姓名',  
      trigger: ['blur', 'change'],  
    },  
  ],  
}; 

// 表单引用  
const uFormRef = ref(null);  
  
// 提交方法
function submit() {
  uFormRef.value.validate().then(valid => {  
    if (valid) {  
      uni.$u.toast('校验通过')
      emit('confirm', deviceForm.value)
      emit('setShow', false)
    } else {  

      uni.$u.toast('校验失败')
    }  
  }).catch(() => {  
    // 处理验证错误  
    uni.$u.toast('校验失败')
  });  
} 

</script>

<style>

</style>
